// 生活护理
<template>
  <div class="life_box" id="life_nursing"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'LifeNursing',
  props: {
    nursingType: String
  },
  data () {
    return {
      arrX: [ '温水擦浴', '整理床单位', '手、足部清洁', '生活自理能力训练 ', '头面部清洁、梳理', '洗发', '协助更衣',
        '沐浴 ', '指/趾甲护理', '晨间护理', '口腔清洁', '药物管理', '协助进食/水', '晚间护理', '压疮预防护理', '安全护理',
        '会阴护理', '排泄护理（协助排险）', '借助器具移动', '皮肤外用药涂擦', '失禁护理', '协助床上移动', '协助翻身叩背排痰',
        '床上使用便器', '人工取便术', '留置尿管的护理', '人工肛门便袋护理'],
      arrY: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      hlx: [],
      xqsl: []
    }
  },
  mounted () {
    this.GeriatricNursingHandle()
    this.charts(this.arrX, this.arrY)
  },
  methods: {
    GeriatricNursingHandle () {
      this.$http.post(this.$api.GeriatricNursing.geriatricNursing, 'hllx=' + this.nursingType, true).then(result => {
        let arr = result.data.result
        for (const hlxlist of arr.values()) {
          this.hlx.push(hlxlist.hlx)
          this.xqsl.push(hlxlist.xqsl)
        }
        this.charts(this.hlx, this.xqsl)
      })
    },
    charts (arrX, arrY) {
      let myChart = echarts.init(document.getElementById('life_nursing'))
      myChart.setOption({
        color: ['#3398DB'],
        title: {
          text: '生活护理',
          textStyle: {
            color: '#fff',
            fontSize: 30
          },
          top: '5%',
          left: '5%'
        },
        grid: {
          left: '6%',
          right: '6%',
          top: '15%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              alignWithLabel: true,
              interval: 0,
              rotate: 30,
              textStyle: {
                color: '#ffffff', // 坐标字体颜色
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff' // x坐标轴颜色
              }
            },
            data: arrX
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              // 坐标轴线条相关设置(颜色等)
              lineStyle: {
                color: '#60707F' // y轴颜色
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#60707F',
                fontSize: 24

              }
            },
            splitLine: {
              lineStyle: {
                color: '#60707F' // 分隔线颜色设置
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '25',
            markPoint: {
              data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
            },
            itemStyle: {
              normal: {
                color: '#2d7df1',
                label: {
                  /* show: true, */
                  /* position: 'top', */
                  textStyle: {
                    color: 'white',
                    fontSize: 16
                  }
                }
              }
            },
            data: arrY
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
  .life_box {
    width: 98%;
    height: 90%;
    position: absolute;
    left: 1rem;
    top: 4rem;
  }
</style>
